    * {
		box-sizing: border-box;
	}
	[v-cloak] {
		display: none;
	}
	// 一些文字基本颜色；
	$color222:#222;
	$color000:#000;
	$color666:#666;
	$color333:#333;
	$colors:111 222 666 999 fff f7f7f7 333 ccc 1890ff;//这个列表是你的设计UI中会出现的颜色，通常会有5到6个颜色，根据自己的UI修改即可；
	$str: '#';
	@function get-color($c){//自定义函数
		@return #{$c};
	}
	
	@each $i in $colors { // 设置$colors列表内的字体颜色和背景色；
		.text-color-#{$i}{
			color:#{$str}#{$i} !important;
		}
		.bg-color-#{$i}{
			background-color: #{$str}#{$i} !important;
		}
	}
	
	@for $i from 30 through 90 {// 设置使用率比较高的宽高属性；
		.h-#{$i}{
			height: 1rpx * $i;
		}
		.w-#{$i}{
			width: 1rpx * $i;
		}
	} 
	
	$border-radius: 4 5 8 10 15 20 30;
	@each $i in $border-radius {//设置常用border圆角；
		.border-radius-#{$i}{
			border-radius: 1rpx * $i;
		}
	}
	
	@for $i from 12 through 36 {// 设置常用文本的字号；
		@if $i % 2 == 0 {
			.fs-#{$i} {
				font-size: 1rpx * $i !important;
			}
		}
	} 
	
	$font-wight:normal bold bolder lighter inherit 100 200 300 400 500 600 700 800 900;
	@each $i in $font-wight { // 设置文本粗细；
		.font-wight-#{$i}{
			font-weight: $i;
		}
	}
		
	@for $i from 5 through 50 {// 设置水平和垂直方向的margin和padding值；
		.m-x-#{$i}{
			margin:0 1rpx * $i;
		}
		.m-y-#{$i}{
			margin: 1rpx * $i 0;
		}
		.p-x-#{$i}{ 
			padding-left: 1rpx * $i;
			padding-right: 1rpx * $i;
		}
		.p-y-#{$i}{
			padding-top: 1rpx * $i ;
			padding-bottom: 1rpx * $i ;
		}
		.m-#{$i}{
			margin: 1rpx * $i;
		}
		.p-#{$i}{
			padding: 1rpx * $i;
		}
	}
	
	@for $i from 1 through 100 {// 设置单边的margin和padding值；
		.mr-#{$i} {
			margin-right: 1rpx * $i;
		}
		.mb-#{$i} {
			margin-bottom: 1rpx * $i;
		}

		.ml-#{$i} {
			margin-left: 1rpx * $i;
		}

		.mt-#{$i} {
			margin-top: 1rpx * $i;
		}

		.pr-#{$i} {
			padding-right: 1rpx * $i;
		}

		.pb-#{$i} {
			padding-bottom: 1rpx * $i;
		}

		.pl-#{$i} {
			padding-left: 1rpx * $i;
		}

		.pt-#{$i} {
			padding-top: 1rpx * $i;
		}
	}
	.mb {
		@mixin marginNum($n, $mb) {
			&-#{$n} {
				margin-bottom: $mb !important;
			}
		}
		@include marginNum(5, 5rpx);
		@include marginNum(10, 10rpx);
		@include marginNum(15, 15rpx);
	}
	$flex:center between around;
	@each $i in $flex { 
		.flex-#{$i}{
			display: flex;
			align-items: center;
			justify-content: center;
			justify-content: space-#{$i};
		}
		.flex-column-#{$i} {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			justify-content: space-#{$i};
		}
	}
	.flex {
		display: flex;
		align-items: center;
	}
	.flex-b {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.flex-end{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex-sb{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.flex-center-column{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.flex-column {
		display: flex;
		flex-direction: column;
	}
	.flex1 {
		flex: 1;
	}
  .pos-relative{
    position: relative;
  }
  .pos-absolute{
    position: absolute;
  }
  .text-center{
    text-align: center;
  }
  .text-left{
    text-align: left;
  }
  .text-right{
    text-align: right;
  }